import { useEffect, useState } from 'react'
import { interfacesUser } from '../../interfaces/user'
import './index.scss'
import { interfacesGoods } from '../../interfaces/goods';
import { PayStatusMap } from '../../utils/global';

function Person() {
  const [userInfo, setUserInfo] = useState();
  const [orderList, setOrderList] = useState([]);

  useEffect(() => {
    getUserInfo();
    getOrderList();
  }, [])

  // 获取用户信息
  const getUserInfo = () => {
    interfacesUser.getUserInfo().then(res => {
      setUserInfo(res.data);
    })
  }

  // 获取订单列表
  const getOrderList = () => {
    interfacesGoods.getOrderList().then(res => {
      setOrderList(res?.data.orders);
    })
  }

  return (
    <div className='person'>
      <div className='title'>Personal Center</div>
      <div className='person-info'>
        <div className='email'>{ userInfo?.user.email }</div>
        <div className='receiving-address'>
          <img className='location-icon' alt='icon' src={require('../../assets/location.png')} />
          <div className='label'>Receiving address</div>
          <div className='value'>{ userInfo?.shipping_info.detail_address }</div>
        </div>
      </div>
      <div className='table'>
        <div className='tr'>
          <div className='th'>Payment status</div>
          <div className='th'>Product items</div>
          <div className='th'>Specifications</div>
          <div className='th'>Payment currency</div>
          <div className='th'>Unit price</div>
          <div className='th'>quantity</div>
          <div className='th'>Total price</div>
          <div className='th'>Free quantity</div>
        </div>
        {
          orderList.map((item, index) => {
            return (
              <div className='tr' key={index}>
                <div className='td'>{ PayStatusMap[item.status] }</div>
                <div className='td'>
                  <div className='goods-img'>
                    <img className='img' alt='goods img' src={item.cover_url} />
                  </div>
                </div>
                <div className='td'>{ item.sku_specs[0].value }</div>
                <div className='td'>{ item.currency }</div>
                <div className='td'>{ item.unit_amount }</div>
                <div className='td'>{ item.quantity }</div>
                <div className='td'>{ item.total_amount }</div>
                <div className='td'>{ item.reward_number }</div>
              </div>
            )
          })
        }
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default Person